<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="https://newsblur.com/media/img/favicon.ico" type="image/png" />
  <link rel="icon" href="https://newsblur.com/media/img/favicon_32.png" sizes="32x32"/>
  <link rel="icon" href="https://newsblur.com/media/img/favicon_64.png" sizes="64x64"/>
  <link rel="alternate" type="application/rss+xml" 
  title="The NewsBlur Blog RSS feed" 
  href="/feed.xml" /><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Turn the lights down, dark mode has come to NewsBlur | The NewsBlur Blog</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="Turn the lights down, dark mode has come to NewsBlur" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="We’ve had dark mode on iOS and Android for years but I’m now pleased to announce a worthy dark theme has come to the NewsBlur web app." />
<meta property="og:description" content="We’ve had dark mode on iOS and Android for years but I’m now pleased to announce a worthy dark theme has come to the NewsBlur web app." />
<link rel="canonical" href="https://blog.newsblur.com/2020/06/24/turn-the-lights-down-dark-mode-has-come-to/" />
<meta property="og:url" content="https://blog.newsblur.com/2020/06/24/turn-the-lights-down-dark-mode-has-come-to/" />
<meta property="og:site_name" content="The NewsBlur Blog" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2020-06-24T11:29:59-04:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Turn the lights down, dark mode has come to NewsBlur" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2020-06-24T11:29:59-04:00","datePublished":"2020-06-24T11:29:59-04:00","description":"We’ve had dark mode on iOS and Android for years but I’m now pleased to announce a worthy dark theme has come to the NewsBlur web app.","headline":"Turn the lights down, dark mode has come to NewsBlur","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.newsblur.com/2020/06/24/turn-the-lights-down-dark-mode-has-come-to/"},"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://blog.newsblur.com/assets/newsblur_logo_512.png"}},"url":"https://blog.newsblur.com/2020/06/24/turn-the-lights-down-dark-mode-has-come-to/"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="/assets/main.css">
  <link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6565292/711824/css/fonts.css" />
   <link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6565292/731824/css/fonts.css" /><link type="application/atom+xml" rel="alternate" href="https://blog.newsblur.com/feed.xml" title="The NewsBlur Blog" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="/">
      <div class="site-title-image">
        <img src="/assets/newsblur_logo_512.png">
      </div>
      <div class="site-title-text">The NewsBlur Blog</div>
    </a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="https://www.newsblur.com">Visit NewsBlur ➤</a></div>
      </nav></div>
</header>

<header class="site-subheader" role="banner">

  <div class="wrapper">
    <div class="top">
      NewsBlur is a personal news reader that brings people together to talk about the world.
    </div>
    <div class="bottom">
      A new sound of an old instrument.
    </div>
  </div>

</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">

  <header class="post-header">
    <h1 class="post-title p-name" itemprop="name headline">Turn the lights down, dark mode has come to NewsBlur</h1>
    <p class="post-meta">
      <time class="dt-published" datetime="2020-06-24T11:29:59-04:00" itemprop="datePublished">Jun 24, 2020
      </time></p>
  </header>

  <div class="post-content e-content" itemprop="articleBody">
    <p>We’ve had dark mode on iOS and Android for years but I’m now pleased to announce a worthy dark theme has come to the NewsBlur web app.</p>

<figure class="tmblr-full" data-orig-height="1441" data-orig-width="1300" data-orig-src="https://s3.amazonaws.com/static.newsblur.com/blog/dark-mode.png"><img data-orig-height="1441" data-orig-width="1300" src="https://s3.amazonaws.com/static.newsblur.com/blog/dark-mode.png" /></figure>

<p>The origins for this theme came from the community. Originally started by <a href="https://userstyles.org/styles/86275/newsblur-kemwer-black">Kemwer in 2013</a>, it has been maintained and updated by <a href="https://userstyles.org/styles/124890/newsblur-dark-theme-by-splike">Splike since 2014</a>. In fact, you can still use Splike’s theme as an alternate dark mode.</p>

<p>That’s 7 years of NewsBlur having an unofficial dark mode, but users had to jump through hoops to use it: installing a browser extension (which had a <a href="https://news.ycombinator.com/item?id=17447816">malware scare in 2018</a>) or having to copy the Stylish CSS to NewsBlur’s Account settings where it would need to be manually updated. What NewsBlur needed was having it built in.</p>

<p>Today NewsBlur is shipping first-class support. Building a dark theme requires more than inverting the existing color scheme, turning white to black and green to purple. Quite a bit of thought around UX and information hierarchy went into this dark theme design. I also used this as an opportunity to freshen up icons and small visual details on both light and dark themes.</p>

<p>Now we have a consistent dark theme across all of the first-party apps. The <a href="https://blog.newsblur.com/2021/06/21/2014-11-18-offline-reading-and-a-dark-theme-on-the-android.html">Android app had dark mode first in 2014</a>. Then came the <a href="https://blog.newsblur.com/2021/06/21/2016-04-12-newsblur-goes-dark-on-ios.html">iOS app is 2016</a>. Now we’re firmly in 2020 and it’s made it to the web. Goes to show that NewsBlur is always getting better. </p>

<p>If you like the new features we’ve been releasing recently, I would greatly appreciate if you could share a tweet or Facebook post about NewsBlur. <strong>If you enjoy staying connected with culture and news through NewsBlur and you think your friends and followers would too, let them know about your news reader of choice.</strong> I appreciate all the kind comments that have come in since releasing this new theme.</p>

<blockquote>
  <p>In love 🥰 with the new dark theme of <a href="https://twitter.com/NewsBlur?ref_src=twsrc%5Etfw">@NewsBlur</a> ! Kudos <a href="https://twitter.com/samuelclay?ref_src=twsrc%5Etfw">@samuelclay</a> 👍</p>

  <p>— Jean Traullé (@jtraulle) <a href="https://twitter.com/jtraulle/status/1275814360141701120?ref_src=twsrc%5Etfw">June 24, 2020</a></p>
</blockquote>

<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote>
  <p>Ooooooooooooooo <a href="https://twitter.com/NewsBlur?ref_src=twsrc%5Etfw">@NewsBlur</a> <a href="https://t.co/eG3XSXzuAG">pic.twitter.com/eG3XSXzuAG</a></p>

  <p>— Billy O’Neal (@MalwareMinigun) <a href="https://twitter.com/MalwareMinigun/status/1275574477753954304?ref_src=twsrc%5Etfw">June 23, 2020</a></p>
</blockquote>

<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<p>And please keep the <a href="https://forum.newsblur.com">good ideas coming on the forum</a>.</p>


  </div><a class="u-url" href="/2020/06/24/turn-the-lights-down-dark-mode-has-come-to/" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">The NewsBlur Blog</h2>

    <div class="footer-col-wrapper">
      

      <div class="footer-col footer-col-1"><ul class="social-media-list"><li><a href="https://github.com/samuelclay"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#github"></use></svg> <span class="username">samuelclay</span></a></li><li><a href="https://www.twitter.com/newsblur"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#twitter"></use></svg> <span class="username">newsblur</span></a></li><li><a href="mailto:blog@newsblur.com?subject=Hello from the NewsBlur blog"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#email"></use></svg> <span class="username">blog@newsblur.com</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>NewsBlur is a personal news reader that brings people together to talk about the world.<br />
A new sound of an old instrument.<br />
</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
